<template>
	<view :style="'padding-top:'+StatusBar+'px;'">
		<view>
			<u-tabs-swiper ref="uTabs" :list="squares" :current="current" @change="tabsChange" :is-scroll="false">
			</u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
			:style="'height: '+appHeight+'rpx;'">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="width: 100%;" :style="'height: '+appHeight+'rpx;'">
					<u-cell-group>
						<u-cell-item :title="project.projectName" v-for="(project,index) in projects" :key="index"
							use-label-slot @click="clickProject(project.projectId)">
							<view slot="label">
								<u-tag :text="tag" :type="getColor(index2)" class="u-m-r-20 u-m-b-20"
									v-for="(tag,index2) in project.projectTag" :key="index2" />
							</view>
						</u-cell-item>
					</u-cell-group>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="width: 100%;" :style="'height: '+appHeight+'rpx;'">
					<u-cell-group>
						<u-cell-item :title="talent.talentName" v-for="(talent,index) in talents" :key="index"
							use-label-slot @click="clickTalent(index)">
							<view slot="label" class="u-flex-1">
								<u-tag :text="tag" :type="getColor(index2)" class="u-m-r-20"
									v-for="(tag,index2) in talent.talentTag" :key="index2" />
							</view>
						</u-cell-item>
					</u-cell-group>
				</scroll-view>
			</swiper-item>
		</swiper>

		<u-popup v-model="showProjectModal" mode="bottom">
			<u-button type="primary" class="u-m-l-20 u-m-r-20 u-m-t-50" @click="clickProjectDetail">查看详情</u-button>
			<u-button type="primary" class="u-m-l-20 u-m-r-20 u-m-t-25 u-m-b-50" @click="clickJoin">申请加入</u-button>
		</u-popup>
		<u-popup v-model="showTalentModal" mode="bottom" v-if="curTalent!=null">
			<u-form ref="uForm" class="u-p-l-20 u-p-r-20" label-width="150">
				<u-form-item label="姓名">
					<view>{{curTalent.talentName}}</view>
				</u-form-item>
				<u-form-item label="年龄">
					<view>{{curTalent.talentAge}}</view>
				</u-form-item>
				<u-form-item label="掌握技能">
					<view class="u-flex u-row" style="width: 100%;">
						<view class="u-flex-1">
							<u-tag :text="tag" :type="getColor(index)" class="u-m-r-20"
								v-for="(tag,index) in curTalent.talentTag" :key="index" />
						</view>
					</view>
				</u-form-item>
				<u-form-item label="偏好领域">
					<view class="u-flex u-row" style="width: 100%;">
						<view class="u-flex-1">
							<u-tag :text="pref" :type="getColor(index)" class="u-m-r-20"
								v-for="(pref,index) in curTalent.pref" :key="index" />
						</view>
					</view>
				</u-form-item>
				<u-form-item label="简介" label-position="top" class="u-border-bottom">
					<text>{{curTalent.talentIntro}}</text>
				</u-form-item>
			</u-form>
			<u-button type="primary" class="u-m-l-20 u-m-r-20 u-m-t-25 u-m-b-50" @click="clickInvite">邀请</u-button>
		</u-popup>
		<u-tabbar :list="$store.state.tabbars" activeColor="#2979ff" mid-button></u-tabbar>
	</view>
</template>

<script>
	export default {
		async onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.appHeight = (res.windowHeight - this.StatusBar - 50) / (res.windowWidth / 750) -
						80;
				}
			});
			var [err1, res1] = await this.$to(this.$api.get({
				url: "/square/projects"
			}));
			this.projects = res1.data;
			var [err2, res2] = await this.$to(this.$api.get({
				url: "/square/talents"
			}));
			this.talents = res2.data;
		},
		data() {
			return {
				squares: [{
					name: '项目广场'
				}, {
					name: '人才广场'
				}],
				projects: [],
				talents: [],
				current: 0,
				swiperCurrent: 0,
				appHeight: 0,
				showProjectModal: false,
				showTalentModal: false,
				curId: 0,
				curTalent: null
			};
		},
		methods: {
			getColor(index) {
				let type = ["primary", "success", "info", "warning", "error"];
				return type[index % 5];
			},
			getRandomNum(min, max) {
				return Math.floor(Math.random() * (max - min + 1) + min);
			},
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			clickProject(id) {
				this.curId = id;
				this.showProjectModal = true;
			},
			clickTalent(index) {
				this.curTalent = this.talents[index];
				this.showTalentModal = true;
			},
			clickProjectDetail() {
				uni.navigateTo({
					url: '../my/project_detail?projectId=' + this.curId
				});
			},
			async clickJoin() {
				let [err, res] = await this.$to(this.$api.post({
					url: "/square/join",
					data: {
						projectId: this.curId
					}
				}));
				if (!err && res.code == 200) {
					this.showProjectModal = false;
					this.$toast(res.msg);
				} else {
					this.$toast(err ? null : res.msg);
				}
			},
			clickInvite() {
				uni.navigateTo({
					url: '../square/choose_project',
					events: {
						choosProject: async projectId => {
							let [err, res] = await this.$to(this.$api.post({
								url: "/square/invite",
								data: {
									projectId: projectId,
									userId: this.curTalent.uid
								}
							}));
							if (!err && res.code == 200) {
								this.showTalentModal = false;
								this.$toast(res.msg);
							} else {
								this.$toast(err ? null : res.msg);
							}
						}
					}
				})
			}
		}
	};
</script>

<style>

</style>
